import React, { memo, useEffect } from 'react'
import { HomeWrapper } from './style';
import HomeBanner from './c-cpns/home-banner';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { fetchHomeDataAction } from '@/store/modules/home';
// import SectionHeader from '@/components/section-header';
// import SectionRooms from '@/components/section-rooms';
import HomeSectionV1 from './c-cpns/home-sectionv1';
import HomeSectionV2 from './c-cpns/home-sectionv2';
import { isEmptyObject } from '@/utils';
import HomeLongFor from './c-cpns/home-longfor';
import HomeSectionV3 from './c-cpns/home-sectionv3';
import { changeHeaderConfigAction } from '@/store/modules/main';
// import { Rating } from '@mui/material';

const Home = memo(() => {
  const { goodPriceInfo, highScoreInfo, discountInfo, hotRecommendInfo, longForInfo, 
    plusInfo } = useSelector((state)=>({
    goodPriceInfo: state.home.goodPriceInfo,
    highScoreInfo:state.home.highScoreInfo,
    discountInfo:state.home.discountInfo,
    hotRecommendInfo: state.home.hotRecommendInfo,
    longForInfo: state.home.longForInfo,
    plusInfo: state.home.plusInfo
  }), shallowEqual)

  const dispatch = useDispatch();
  useEffect(()=> {
    dispatch(fetchHomeDataAction())
    dispatch(changeHeaderConfigAction({ isFixed: true, topAlpha: true }))
  },[dispatch])
  return (
    <HomeWrapper>
      <HomeBanner />
      <div className="content">
        {isEmptyObject(discountInfo) && <HomeSectionV2 infoData={discountInfo} />}
        {isEmptyObject(hotRecommendInfo) && <HomeSectionV2 infoData={hotRecommendInfo} />}
        {isEmptyObject(goodPriceInfo) && <HomeSectionV1 infoData={goodPriceInfo} />}
        {isEmptyObject(highScoreInfo) && <HomeSectionV1 infoData={highScoreInfo} />}
        {isEmptyObject(longForInfo) && <HomeLongFor infoData={longForInfo} />}
        {isEmptyObject(plusInfo) && <HomeSectionV3 infoData={plusInfo} />}
      </div>
      {/* <div className="content">
        <div className="good-price">
          <SectionHeader title={goodPriceInfo.title} />
          <SectionRooms roomList={goodPriceInfo.list} />
        </div>
      </div> */}
    </HomeWrapper>
  )
})

export default Home